<template>
  <div class="input-select-group">
    <input type="text" class="form-control" maxLength="10" autocomplete="off" v-model="curInputVal" @keyup.stop="inputToUpdateVal">
    <span class="select-btn" @click.stop="isShowList = !isShowList"></span>
    <transition name="slide">
      <ul class="list-unstyled select-region" v-show="isShowList">
        <li v-for="item in listInfo" @click.stop="selectOneItem(item.name,item.value)" :class="(item.name==curInputVal?'active':'')" :data-val="item.value">{{item.name}}</li>
      </ul>
    </transition>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  data() {
    return {
      isShowList: false,
      curInputVal: this.inputVal
    }
  },
  props: {
    inputVal: {
      type: String,
      required: true
    },
    listInfo: {
      type: Array,
      required: true
    }
  },
  mounted: function(){
    let _this = this;
    $('body').on('click',function(){
      _this.hideSelector();
    })
  },
  methods: {
    selectOneItem(name,value) {
      this.curInputVal = name;
      this.hideSelector();
      this.$emit('selectItem',name,value);
    },
    hideSelector() {
      this.isShowList = false;
    },
    inputToUpdateVal(e) {
      var e = e || window.event,
          _this = this,
          keyCode = e.keyCode,
          curVal = this.curInputVal,
          _listArr = this.listInfo;
      if(keyCode == 13){
        this.$emit('inputEnterFn');
        return;
      }
      if(curVal !== this.inputVal){
        var isMatched = false,
            Name = '',
            Val = '';
        $.each(_listArr, function(key,value){
          if(curVal == value.name){
            Val = value.value;
            Name = value.name;
            isMatched = true;
            return false;
          }
        })
        if(!isMatched){
          Name = curVal;
          Val = curVal;
        }
        _this.$emit('selectItem',Name,Val);
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/less/base/variables.less";
@import "../../assets/less/mixins/border-radius.less";
.slide-enter-active, .slide-enter, .slide-leave-active {
  transition: all .2s ease-in-out;
}
.slide-enter-active, .slide-leave{
  opacity: 1;
}
.slide-enter, .slide-leave-active {
  opacity: 0;
}
.input-select-group{
  position: relative;
  .form-control{
    padding-right: 34px;
  }

  .select-btn{
    display: inline-block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: @blue;
    .border-right-radius(4px);
    cursor: pointer;
    &::after{
      content: '';
      position: absolute;
      top: 12px;
      right: 8px;
      width: 0;
      height: 0;
      border: 6px solid transparent;
      border-top-color: @white;
    }
  }
  .select-region{
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    color: @black;
    background-color: @white;
    // border: 1px solid @white;
    .border-bottom-radius(4px);
    max-height: 124px;
    overflow-y: scroll;
    z-index: 5;
    li{
      padding: 5px 0px 5px 12px;
      text-align: left;
      cursor: pointer;
      &:hover,&.active{
        background-color: lighten(@blue, 5%);
        border-color: lighten(@blue, 5%);
        color: @white;
      }
    }
  }
}
</style>
